<!--
 * @Description:
 * @Author: 月间
 * @Date: 2024-12-11 23:09:29
 * @LastEditTime: 2025-06-03 22:29:51
 * @LastEditors:
-->
<script setup lang="tsx">
import { NButton, NPopconfirm, NTag } from 'naive-ui';
import { useBoolean } from '@sa/hooks';
import { computed, reactive, ref, watch } from 'vue';
import { fetchGetTaskLogList } from '@/service/api';
import { useAppStore } from '@/store/modules/app';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { $t } from '@/locales';
import TaskSearch from './modules/task-search.vue';

const appStore = useAppStore();

const {
  columns,
  columnChecks,
  data,
  loading,
  getData,
  getDataByPage,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: fetchGetTaskLogList,
  apiParams: {
    current: 1,
    size: 10,
    queue_name: null,
    success: null
  },
  columns: () => [
    {
      key: 'index',
      title: $t('common.index'),
      width: 64,
      align: 'center',
      fixed: 'left'
    },
    {
      key: 'success',
      title: '是否成功',
      align: 'center',
      fixed: 'left',
      width: 100,
      render(row) {
        return row.success ? (
          <NTag type="success" round>成功</NTag>
        ) : (
          <NTag type="error" round>失败</NTag>
        );
      }
    },
    {
      key: 'host_process',
      title: '执行主机进程信息',
      align: 'center',
      minWidth: 100,
      fixed: 'left'
    },
    {
      key: 'queue_name',
      title: '队列名称',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'function',
      title: '函数名称',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'task_id',
      title: '任务id',
      align: 'center',
      minWidth: 100
    },
    // {
    //   key: 'process_id',
    //   title: '进程ID',
    //   align: 'center',
    //   minWidth: 100
    // },
    // {
    //   key: 'thread_id',
    //   title: '线程ID',
    //   align: 'center',
    //   minWidth: 100
    // },
    // {
    //   key: 'publish_time',
    //   title: '发布时间戳',
    //   align: 'center',
    //   minWidth: 100
    // },
    {
      key: 'publish_time_str',
      title: '发布时间',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'params',
      title: '函数参数',
      align: 'center',
      minWidth: 100
    },
    // {
    //   key: 'params_str',
    //   title: '函数参数字符串',
    //   align: 'center',
    //   minWidth: 100
    // },
    {
      key: 'result',
      title: '函数返回值',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'run_times',
      title: '执行次数',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'exception',
      title: '异常信息',
      align: 'center',
      minWidth: 100,
      ellipsis: {
        tooltip: true
      }
    },
    // {
    //   key: 'time_start',
    //   title: '开始时间戳',
    //   align: 'center',
    //   minWidth: 100
    // },
    {
      key: 'time_cost',
      title: '耗时',
      align: 'center',
      minWidth: 100
    },
    // {
    //   key: 'time_end',
    //   title: '结束时间戳',
    //   align: 'center',
    //   minWidth: 100
    // },
    {
      key: 'run_status',
      title: '执行状态',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'total_thread',
      title: '并发数',
      align: 'center',
      minWidth: 100
    },
    {
      key: 'rpc_result_expire_seconds',
      title: 'RPC结果过期时间',
      align: 'center',
      minWidth: 100
    }
    // {
    //   key: 'host_name',
    //   title: '主机名称',
    //   align: 'center',
    //   minWidth: 100
    // },
    // {
    //   key: 'script_name',
    //   title: '脚本名称',
    //   align: 'center',
    //   minWidth: 100
    // }
    // {
    //   key: 'insert_time_str',
    //   title: '插入时间',
    //   align: 'center',
    //   minWidth: 100
    // },
    // {
    //   key: 'insert_minutes',
    //   title: '插入时间（分钟）',
    //   align: 'center',
    //   minWidth: 100
    // },
    // {
    //   key: 'utime',
    //   title: '时区时间',
    //   align: 'center',
    //   minWidth: 100
    // }
  ]
});

const {
  checkedRowKeys,
  onBatchDeleted
  // closeDrawer
} = useTableOperate(data, getData);

async function handleBatchDelete() {
  // request
  // console.log(checkedRowKeys.value);
  // const { error } = await fetchDeleteResource(checkedRowKeys.value);
  // if (error) return;
  onBatchDeleted();
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <TaskSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <NCard title="任务日志" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :disabled-delete="checkedRowKeys.length === 0"
          :loading="loading"
          @refresh="getData"
        >
          <template #prefix>
            <NPopconfirm @positive-click="handleBatchDelete">
              <template #trigger>
                <NButton size="small" ghost type="error" :disabled="checkedRowKeys.length === 0">
                  <template #icon>
                    <icon-ic-round-delete class="text-icon" />
                  </template>
                  {{ $t('common.batchDelete') }}
                </NButton>
              </template>
              {{ $t('common.confirmDelete') }}
            </NPopconfirm>
          </template>
        </TableHeaderOperation>
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="3000"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>

<style scoped></style>
